import SearchPanel from "./search-panel";
import List from "./list";
import { useDebounce, useDocumentTitle, useProjectModal } from "../../utils";
// import { useHttp } from '../../utils/http'
import styled from "@emotion/styled";
// import { useAsync } from "../../utils/use-async";
import { useProjects } from "../../utils/project";
import { useUser } from "../../utils/user";
import { useProjectsSearchParams } from "./util";
import { ButtonNoPadding, ErrorBox, Row } from "../../components/lib";

// export interface ParamProps {
//   name: string;
//   personId: string;
// }
export default function ProjectListScreens() {
  // const [, setParam] = useState({
  //   name: '',
  //   personId: ''
  // })
  // const [users, setUsers] = useState<User[]>([])
  // const [list, setList] = useState<Project[]>([])
  // const [isLoading, setIsLoading] = useState(false);
  // const [error, setError] = useState<null | Error>(null)
  // const [value, setUrl] = useUrlQueryParam(["name"])
  // const [param, setParam] = useUrlQueryParam(['name', 'personId'])
  // console.log(value, setUrl);
  const { open } = useProjectModal();
  useDocumentTitle("项目列表");

  const [param, setParam] = useProjectsSearchParams();

  // let debouncedValue = useDebounce(param, 500)
  const { isLoading, error, data: list } = useProjects(useDebounce(param, 500));

  const { data: users } = useUser();

  // setUrl({})
  // const client = useHttp()
  // useEffect(() => {
  // run(client('/projects', {data: cleanObject(debouncedValue) }))
  // setIsLoading(true)
  // client('/projects', {data: cleanObject(debouncedValue) }).then(setList)
  //   .finally(() => {setIsLoading(false)})
  //   .catch(err => {
  //     setList([])
  //     setError(err)
  //   })
  // fetch(`${apiUrl}/projects?${qs.stringify(cleanObject(param))}`).then(async (response) => {
  //   if(response.ok) {
  //     setList(await response.json())
  //   }
  // })
  // eslint-disable-next-line react-hooks/exhaustive-deps
  // }, [debouncedValue])
  // useMount(() => {
  // setIsLoading(true)
  // client('/users').then(setUsers)
  // .finally(() => {setIsLoading(false)})
  // .catch(err => {
  //   setList([])
  //   setError(err)
  // })
  // fetch(`${apiUrl}/users`).then(async (response) => {
  //   if(response.ok) {
  //     setUsers(await response.json())
  //   }
  // })
  // })
  return (
    <Container>
      <Row jcsb={true}>
        <h1>项目列表</h1>
        <ButtonNoPadding
          onClick={() => {
            open();
          }}
          type={"link"}
        >
          创建项目
        </ButtonNoPadding>
      </Row>
      <SearchPanel param={param} setParam={setParam} users={users || []} />
      {/*{error? <Typography.Text type={'danger'} >{error.message}</Typography.Text>: null }*/}
      <ErrorBox error={error} />
      <List loading={isLoading} dataSource={list || []} users={users || []} />
    </Container>
  );
}
ProjectListScreens.whyDidYouRender = false;

const Container = styled.div`
  padding: 3.2rem;
  width: 100%;
`;
